<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>即时通信软件</title>
</head>

<body>
<div id="login-section">
    <h2>用户登录</h2>
    <input type="text" id="username" placeholder="用户名">
    <button id="login-button">登录</button>
    <button id="logout-button" disabled>登出</button>
    <p id="status"></p>
</div>
<div id="message-section" style="display: none;">
    <div id="private-chat">
        <h2>私聊</h2>
        <input type="text" id="private-receiver" placeholder="私聊对象">
        <input type="text" id="private-message" placeholder="私聊内容">
        <button id="private-send-button">发送私聊</button>
        <div id="private-message-list"></div>
    </div>
    <div id="join-group">
        <h2>加入群聊</h2>
        <input type="text" id="group-name" placeholder="群名称">
        <button id="join-group-button">加入群聊</button>
    </div>
    <div id="group-chat">
        <h2>群聊</h2>
        <input type="text" id="group-message" placeholder="群聊内容">
        <button id="group-send-button" disabled>发送群聊</button>
        <div id="group-message-list"></div>
    </div>
    <!-- 添加保存消息的按钮 -->
    <button id="save-messages-button">存储消息</button>
</div>
<script src="js/app.js"></script>
</body>

</html>